<!-- 营销体系 -->
<template>
   <headerView></headerView>
   <div class="marketing">
      <!-- banner广告图 -->
      <div class="banner">
         <!-- <img src="../../assets/images/marketing-braner.png" alt=""> -->
         <video autoplay="autoplay" loop="loop" muted class="video-home" ref="videoRef"
            src="http://www.wanwutong.com/home-video.mp4" preload="auto"></video>
         <div class="banner-text">
            <h2 class="h2"><span>数实融合 供销一体</span></h2>
            <p>一件代发 项目集采 开发定制 批量采购</p>
            <div class="banner-btn">
               <div class="el-button cursor" @click="goodsLogin">选品中心</div>
               <div class="el-button cursor" @click="shuzidap"> 数字大屏</div>
            </div>
         </div>
      </div>
      <div class="ditch center-text">
         <h3 class="title">销售渠道</h3>
         <ul class="items">
            <li class="item">
               <img class="one_img" src="../../assets/images/marketing-one1.png" alt="">
               <div class="one-t">
                  <h5><span>银行</span></h5>
                  <!-- <p>自主开发的数据选品系统。方便与集团节假日等产品的采购 </p> -->
               </div>
            </li>
            <li class="item">
               <img class="one_img" src="../../assets/images/marketing-one1.png" alt="">
               <div class="one-t">
                  <h5><span>航空</span></h5>
                  <!-- <p>自主开发的数据选品系统。方便与集团节假日等产品的采购 </p> -->
               </div>
            </li>
            <li class="item">
               <img class="one_img" src="../../assets/images/marketing-one2.png" alt="">
               <div class="one-t">
                  <h5><span>政企</span></h5>
                  <!-- <p>自主开发的数据选品系统。方便与集团节假日等产品的采购 </p> -->
               </div>
            </li>
            <li class="item">
               <img class="one_img" src="../../assets/images/marketing-one3.png" alt="">
               <div class="one-t">
                  <h5><span>私域商城</span></h5>
                  <!-- <p>自主开发的数据选品系统。方便与集团节假日等产品的采购 </p> -->
               </div>
            </li>
            <li class="item">
               <img class="one_img" src="../../assets/images/marketing-one5.png" alt="">
               <div class="one-t">
                  <h5><span>积分会员商城</span></h5>
                  <!-- <p>自主开发的数据选品系统。方便与集团节假日等产品的采购 </p> -->
               </div>
            </li>
            <li class="item">
               <img class="one_img" src="../../assets/images/marketing-one6.png" alt="">
               <div class="one-t">
                  <h5><span>专属定制</span></h5>
                  <!-- <p>自主开发的数据选品系统。方便与集团节假日等产品的采购 </p> -->
               </div>
            </li>
         </ul>
      </div>
      <!-- 销售类型  -->
      <div class="type center-text">
         <h3 class="title">销售类型</h3>
         <div class="type-box">
            <div class="item">
               <img class="tow-img" src="../../assets/images/marketing-tow1.png" alt="">
               <div class="tow-t">
                  <h5><span>一件代发</span></h5>
                  <!-- <p>聚焦业务中台,供应链协同与智能制造平台等工业行业场景，为腾讯工业互联网应用服务战略合作伙伴。</p> -->
               </div>
            </div>
            <div class="item">
               <img class="tow-img" src="../../assets/images/marketing-tow2.png" alt="">
               <div class="tow-t">
                  <h5><span>项目采集</span></h5>
                  <!-- <p>聚焦业务中台,供应链协同与智能制造平台等工业行业场景，为腾讯工业互联网应用服务战略合作伙伴。
                  </p> -->
               </div>
            </div>
            <div class="item">
               <img class="tow-img" src="../../assets/images/marketing-tow3.png" alt="">
               <div class="tow-t">
                  <h5><span>开发定制</span></h5>
                  <!-- <p>聚焦业务中台,供应链协同与智能制造平台等工业行业场景，为腾讯工业互联网应用服务战略合作伙伴。
                  </p> -->
               </div>
            </div>
            <div class="item">
               <img class="tow-img" src="../../assets/images/marketing-tow4.png" alt="">
               <div class="tow-t">
                  <h5><span>批量采购</span></h5>
                  <!-- <p>聚焦业务中台,供应链协同与智能制造平台等工业行业场景，为腾讯工业互联网应用服务战略合作伙伴。
                  </p> -->
               </div>
            </div>
         </div>
      </div>
      <!--优势类目  -->
      <div class="superiority center-text">
         <h3 class="title ">优势类目</h3>
         <ul class="three-box">
            <li class="item">
               <img class="three-img" src="../../assets/images/marketing-three1.png" alt="">
               <div class="three-t">
                  <h5><span>三农产品</span></h5>
                  <p class="three-text">米面粮油 </p>
                  <p class="three-text">肉禽蛋奶 </p>
                  <p class="three-text">地域土产 </p>
               </div>
            </li>
            <li class="item">
               <img class="three-img" src="../../assets/images/marketing-three2.png" alt="">
               <div class="three-t">
                  <h5><span>家居日用</span></h5>
                  <p class="three-text">居家百货 </p>
                  <p class="three-text">厨房用品 </p>
                  <p class="three-text">收纳清洁 </p>
               </div>
            </li>
            <li class="item">
               <img class="three-img" src="../../assets/images/marketing-three3.png" alt="">
               <div class="three-t">
                  <h5><span>图书刊物</span></h5>
                  <p class="three-text">少儿阅读 </p>
                  <p class="three-text">生活养生 </p>
                  <p class="three-text">社会科学 </p>
               </div>
            </li>
            <li class="item">
               <img class="three-img" src="../../assets/images/marketing-three4.png" alt="">
               <div class="three-t">
                  <h5><span>自营品牌</span></h5>
                  <p class="three-text">助农产品 </p>
                  <p class="three-text">家居日用 </p>
                  <p class="three-text">滋补养生 </p>
               </div>
            </li>
         </ul>
      </div>
   </div>
   <bottomView></bottomView>
</template>
<script setup>
import { ref } from "vue";
import { useRouter } from 'vue-router';
const Router = useRouter()
const goodsLogin = () => {
   window.open("https://xp.wwtscm.com/#/")
}

const shuzidap = () => {
   window.open(Router.resolve({ path: '/visual' }).href, '_blank');
}
</script>
<style scoped lang="scss">
@import "@/assets/base.scss";

@keyframes scaleanm {
   0% {
      transform: translateY(-20vw);
      opacity: 0;
   }

   50% {
      transform: translateY(-10vw);
      opacity: 0;
   }

   100% {
      transform: translateY(0vw);
      opacity: 1;
   }
}

.marketing {

   // 标题
   .title {
      font-size: $title-font-size1;
      font-weight: 700;
      text-align: center;
      margin: 3.5vw 0;

      &::after {
         display: block;
         content: '';
         width: 2.6vw;
         height: 0.4vw;
         background-color: $firm-color;
         margin: 0 auto;
         border-radius: 0.2vw;
         margin-top: 0.6vw;
      }
   }

   // 版心居中
   .center-text {
      width: 68%;
      margin: 0 auto;
   }

   // 广告
   .banner {
      position: absolute;
      top: 0vw;
      width: 100%;
      height: 40vw;
      overflow: hidden;

      img {
         width: 100%;
         height: 40vw;
      }

      .video-home {
         width: 100%;
      }

      .banner-text {
         width: 35%;
         height: 100%;
         margin-left: 32%;
         position: absolute;
         top: 0;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         z-index: 2;
         color: #fff;

         .h2 {
            display: flex;
            justify-content: center;

            span {
               color: #fff;
               background-image: url('../../assets/images/home-tbgc.png');
               background-repeat: no-repeat;
               background-position: left bottom;
               background-size: 100% 0.2vw;
               font-weight: 700;
               font-size: $title-font-size1;
               margin-bottom: 3vw;
               letter-spacing: 0.3vw;
            }
         }

         p {
            font-size: $title-font-size3;
            font-weight: 700;
            letter-spacing: 0.3vw;
         }

         .banner-btn {
            display: flex;
            margin-top: 4vw;

            .el-button {
               width: 7.7vw;
               height: 2.19vw;
               font-size: $title-font-size6;
               border-radius: 1.6vw;
               line-height: 3.13vw;
               padding: 0;
               color: #fff;
               line-height: 2.19vw;
               text-align: center;
               border: #fff 0.1vw solid;

               &:nth-child(1) {
                  background-color: rgba($color: $firm-color, $alpha: 0.8);
               }

               &:nth-child(2) {
                  background-color: rgba($color: $botton-bgc, $alpha: 0.8);
                  margin-left: 1vw;
               }
            }
         }
      }
   }

   //销售渠道
   .ditch {
      margin-top: 46.5vw;

      .items {
         display: flex;
         flex-wrap: wrap;
         justify-content: space-evenly;

         .item {
            width: 19.8vw;
            height: 8.33vw;
            box-shadow: $box-shadow-all;
            border-radius: 0.55vw;
            margin-bottom: 1.8vw;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 1vw;
            transition: all 1s;

            &:hover {
               transform: scale(1.1);
            }

            .one_img {
               width: 4.17vw;
               height: 4.17vw;
            }

            .one-t {
               margin-left: 0.5vw;

               h5 {
                  font-size: $title-font-size4;

                  span {
                     background-image: url('../../assets/images/home-tbgc.png');
                     background-repeat: no-repeat;
                     background-position: left bottom;
                     background-size: 100% 0.4vw;
                     font-weight: 700;
                  }
               }

               p {
                  font-size: $title-font-size7;
                  color: #666;
                  line-height: 1.8;
               }
            }
         }
      }
   }

   // 销售类型
   .type {
      .type-box {
         display: flex;
         justify-content: space-between;

         .item {
            width: 16.15vw;
            height: 12.68vw;
            overflow: hidden;


            .tow-img {
               width: 100%;
               transition: all 1s;

               &:hover {
                  transform: scale(1.2);
               }
            }

            .tow-t {
               width: 15.42vw;
               // height: 7.34vw;
               height: 4vw;
               background-color: #fff;
               border-radius: 0.55vw;
               box-shadow: $box-shadow-all;
               margin: 0 auto;
               position: relative;
               top: -20%;
               padding: 0.8vw;

               h5 {
                  font-size: $title-font-size4;
                  margin-bottom: 0.4vw;

                  span {
                     background-image: url('../../assets/images/home-tbgc.png');
                     background-repeat: no-repeat;
                     background-position: left bottom;
                     background-size: 100% 0.4vw;
                     font-weight: 700;
                  }
               }

               p {
                  font-size: $title-font-size7;
                  color: #666;
                  line-height: 1.6;
               }
            }
         }
      }
   }

   // 优势类目
   .superiority {
      margin-bottom: 4vw;

      .three-box {
         display: flex;
         flex-wrap: wrap;

         .item {
            width: 33.5vw;
            height: 20.3vw;
            position: relative;

            &:hover {
               .three-text {

                  animation: scaleanm 0.5s linear 1 forwards;

                  &:nth-child(2n+1) {
                     animation: scaleanm 0.5s linear 0.1s 1 forwards;
                  }
               }
            }

            .three-img {
               width: 100%;
            }

            .three-t {
               position: absolute;
               left: 5vw;
               top: 20%;
               color: #fff;

               h5 {
                  font-size: $title-font-size4;
                  margin-bottom: 1.5vw;

                  span {
                     background-image: url('../../assets/images/home-tbgc.png');
                     background-repeat: no-repeat;
                     background-position: left bottom;
                     background-size: 100% 0.4vw;
                     font-weight: 700;
                  }
               }

               .three-text {
                  font-size: $title-font-size6;
                  opacity: 0;
                  margin-top: 0.8vw;

                  &::before {
                     display: inline-block;
                     content: '';
                     width: 0.4vw;
                     height: 0.4vw;
                     border-radius: 50%;
                     background-color: #fff;
                     margin-right: 0.4vw;
                  }

               }
            }

         }
      }
   }
}

// @media screen and (max-width: 1000px) {
//    .marketing {

//       // 标题
//       .title {
//          font-size: $banner-title-size3;

//          &::after {
//             width: 3.6vw;
//             height: 0.6vw;
//          }
//       }

//       // 版心居中
//       .center-text {
//          width: $web-center;
//          margin: 0 auto;
//       }

//       // 广告
//       .banner {
//          height: 82vw;

//          .video-home {
//             width: 150%;
//             position: absolute;
//             right: 0;
//             top: 0;
//          }

//          .banner-text {
//             width: 40%;
//             height: 100%;
//             margin-left: 32%;


//             .h2 {

//                span {
//                   font-size: $banner-title-size;
//                   background-size: 100% 1vw;
//                }
//             }

//             p {
//                font-size: $content-title-size;
//             }

//             .banner-btn {
//                .el-button {
//                   width: 20vw;
//                   height: 6.19vw;
//                   font-size: $content-title-size;
//                   border-radius: 4.1vw;
//                   line-height: 6.19vw;

//                   &:nth-child(2) {
//                      margin-left: 2vw;
//                   }
//                }
//             }
//          }
//       }

//       //销售渠道
//       .ditch {
//          margin-top: 86.5vw;
//          width: 90%;

//          .items {
//             display: flex;
//             flex-wrap: wrap;
//             justify-content: space-evenly;

//             .item {
//                width: 27.8vw;
//                height: 22.33vw;
//                border-radius: 1vw;
//                margin-bottom: 2vw;
//                flex-direction: column;

//                .one_img {
//                   width: 8.17vw;
//                   height: 8.17vw;
//                }

//                .one-t {
//                   margin-left: 0.5vw;

//                   h5 {
//                      font-size: $banner-title-size5;
//                   }
//                }
//             }
//          }
//       }

//       // 销售类型
//       .type {
//          .type-box {
//             display: flex;
//             flex-wrap: wrap;
//             justify-content: space-between;

//             .item {
//                width: 36.15vw;
//                height: 34.68vw;
//                overflow: hidden;


//                .tow-img {
//                   width: 100%;
//                   transition: all 1s;

//                   &:hover {
//                      transform: scale(1.2);
//                   }
//                }

//                .tow-t {
//                   width: 34.15vw;
//                   height: 8vw;
//                   border-radius: 1vw;
//                   position: relative;
//                   top: -10%;
//                   padding: 1.6vw;
//                   border: $firm-color 0.1vw solid;

//                   h5 {
//                      font-size: $banner-title-size5;
//                      margin-bottom: 0.4vw;
//                      display: flex;
//                      align-items: center;
//                      justify-content: center;

//                      span {
//                         background-image: url('../../assets/images/home-tbgc.png');
//                         background-repeat: no-repeat;
//                         background-position: left bottom;
//                         background-size: 100% 0.6vw;
//                         font-weight: 700;
//                      }
//                   }

//                   p {
//                      font-size: $title-font-size7;
//                      color: #666;
//                      line-height: 1.6;
//                   }
//                }
//             }
//          }
//       }

//       // 优势类目
//       .superiority {
//          width: 100%;
//          height: 70vw;
//          overflow: hidden;

//          .three-box {
//             height: 56vw;
//             width: 430vw;
//             // flex-wrap: nowrap;

//             .item {
//                width: 80.5vw;
//                height: 55vw;
//                position: relative;

//                &:hover {
//                   .three-text {
//                      animation: none;

//                      &:nth-child(2n+1) {
//                         animation: none;
//                      }
//                   }
//                }

//                .three-img {
//                   width: 100%;
//                }

//                .three-t {
//                   position: absolute;
//                   width: 100%;
//                   height: 100%;

//                   h5 {
//                      font-size: $title-font-size4;
//                      margin-bottom: 1.5vw;

//                   }

//                   .three-text {
//                      font-size: $title-font-size6;
//                      opacity: 1;
//                      margin-top: 0.8vw;

//                      &::before {
//                         width: 0.8vw;
//                         height: 0.8vw;
//                      }

//                   }
//                }

//             }
//          }
//       }
//    }
// }
</style>